<template>
  <div class="My">
    <!-- 我的照片背景 :style="{backgroundImage:`url('${userInfo.userImg}')`}" -->
    <div class="my-img" :style="{backgroundImage:`url('${userInfo.userBg}')`}">
      <van-uploader class="upload-box" :after-read="uploadBg" />

    </div>

    <div class="my-box">
      <div class="my-info">
        <div class="clearfix">
          <img :src="userInfo.userImg" alt="" />
        </div>
        <div class="user-info">
          <div class="user-name one-text">{{userInfo.nickName}}</div>
          <div class="desc one-text">{{userInfo.desc == "" ? '这家伙很懒，什么也没有留下' : userInfo.desc}}</div>
        </div>
      </div>
      <div class="my-content">
        <van-cell is-link v-for="(item,i) in listData" :key="i" :title="item.title" @click="jumpage(item.name)" />
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/less/my.less'
import request from '@/utils/reques'
import qs from 'qs'
export default {
  created() {
    this.getUserInfo()
  },
  data() {
    return {
      userInfo: {},
      listData: [
        {
          title: '个人资料',
          name: 'Account'
        },
        {
          title: '我的订单',
          name: 'Order'
        },
        {
          title: '我的收藏',
          name: 'Like'
        },
        {
          title: '地址管理',
          name: 'Myaddress'
        },
        {
          title: '浏览足迹',
          name: 'Track'
        },
        {
          title: '安全中心',
          name: 'Secure'
        }
      ]
    }
  },
  methods: {
    async uploadBg(file) {
      // 'jpg',
      let type = ['jpg', 'png', 'gif', 'jpeg', 'webp']
      let size = 1
      let fileType = file.file.type.split('/')[1]
      if (type.indexOf(fileType) === -1) {
        this.$toast('文件类型只支持${type.join(', ')}')
        return
      }
      // 判断文件大小
      let fileSize = file.file.size / 1024 / 1024
      if (fileSize > size) {
        this.$toast('文件大小不能超过${size}MB')
        return
      }

      // 处理base64标记
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '')

      let tokenString = localStorage.getItem('token')

      if (!tokenString) {
        this.$toast('请先登录~')
        return this.$router.push({ name: 'Login' })
      }

      this.$toast.loading({
        message: '获取信息中',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await request.post('/updateUserBg', qs.stringify({ appkey: this.appkey, tokenString, imgType: fileType, serverBase64Img: base64 }))
        // console.log(res)
        this.$toast.clear()
        if (res.code == 700) {
          this.$router.push({ name: 'Login' })
        } else if (res.code == 'I001') {
          this.userInfo.userBg = res.userBg
        }
        this.$toast(res.msg)
      } catch (error) {
        this.$toast.clear()
      }
    },
    jumpage(name) {
      this.$router.push({ name: name })
    },
    async getUserInfo() {
      this.$toast.loading({
        message: '数据加载中',
        forbidClick: true
      })
      try {
        let token = localStorage.getItem('token')
        const { data: res } = await request.get('/findMy', { params: { appkey: this.appkey, tokenString: token } })
        if (res.code == 'A001') {
          this.userInfo = res.result[0]
        }
      } catch (error) {
        this.$toast.clear()
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>